<template lang="html">
  <div class="">
      <div class="">
          <el-button type="primary" @click="add">新增属性</el-button>
      </div>
      <tableVue :list="list" :state="false" :pagination="true">
           <slot>
             <el-table-column label="操作" align="center">
                 <template slot-scope="scope">
                   <el-button
                     size="mini"
                     @click="compile(scope.row)">编辑
                   </el-button>
                   <el-button
                     size="mini"
                     type="danger"
                     class="del"
                     @click="del(scope.row)">删除</el-button>
                 </template>
              </el-table-column>
           </slot>
      </tableVue>
        <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
          <slot>
              <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="属性名称" prop='specsName'>
                      <el-input v-model="pageData.specsName" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="规格值" prop='specsVal'>
                      <el-input v-model="pageData.specsVal" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item class="confirm">
                     <el-button type="primary"  v-if="btnState == '1'" @click="upForm('post')">提交</el-button>
                     <el-button type="primary" v-if="btnState == '2'" @click="upForm('put')">更新</el-button>
                  </el-form-item>
                </el-form>
          </slot>
        </dialogVue>
  </div>
</template>

<script>
  import Data from './index.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    allsepcs,
    sepcsList,
    delspecs
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
        if (this.$store.state.category.goodsId) {
            this.pageData.goodsId = this.$store.state.category.goodsId
            this.getsepcsList()
        }
    },
    methods : {
      getsepcsList () {
        sepcsList( this.$store.state.category.goodsId ).then(res=>{
          if (res.data.code == 'OK') {
            this.total = res.data.data.total;
            console.log(res);
            this.list.tbody = res.data.data.map(item=>{

               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               return item;
            });
          }
        })
      },
      add () {
        this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
        this.dialog = true;
        this.pageData = {};
        this.btnState = '1'
      },
      upForm (method) {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            var data = {
              specsName : this.pageData.specsName,
              specsVal : this.pageData.specsVal,
              goodsId : this.$store.state.category.goodsId,
              specsId : this.pageData.specsId
            }
            allsepcs(data,method).then(res=>{
              if (res.data.code == 'OK') {
                  this.getsepcsList();
                 if (method == 'post') {
                     this.$message.success('新增成功')
                 } else {
                     this.$message.success('编辑成功')
                 }
                  this.dialog = false;
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
       });
      },
      changeData (data) {
        this.dialog = data;
      },
      compile (item) {
        this.btnState = '2'
        this.dialog = true;
        this.pageData.specsName = item.specsName;
        this.pageData.specsVal = item.specsVal;
        this.pageData.specsId = item.specsId
      },
      del (item) {
        this.delMessage(()=>{
          var id = []
          id.push(item.specsId);
          delspecs(id).then(res=>{
            if (res.data.code == 'OK') {
                this.$message.success('删除成功');
                this.getsepcsList();
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../../../../../../styles/common.css";
</style>
